<template>
	<view style="padding: 0 40rpx;height: 100%;position: relative;">
		<textarea :auto-focus="true" placeholder="请输入动态内容～" @input="handleContentInput" :value="content"
			placeholder-style="font-size: 32rpx;font-weight: 400;color: #999999;"
			style="font-size: 32rpx;font-weight: 400;color: #666;border: none;padding: 20rpx 0;margin-top: 20rpx;height: 180rpx;"></textarea>
		<u-upload :fileList="fileList" @afterRead="handleUpload" @delete="handleHeaderDel" multiple :maxCount="9"
			:width="imageWidth" :height="imageWidth"></u-upload>
		<view class="title">*选择标签</view>
		<view class="tag-list">
			<view class="tag-item" v-for="(item, index) in checkboxList" :key="index" :name="item.name" :value="item.value"
				:class="{'active': checkedValues.indexOf(index) != -1 }" @click="selectList(index)">
				#{{ item.label }}
			</view>
		</view>
		<view class="tag-list">
			<view v-for="(item, index) in tagParamList" class="tag-item" :class="item.selected ? 'active' : ''"
				:key="index" @click="handleTagClick(item.tagId)">#{{item.tagName}}</view>
		</view>
		<u-button
			customStyle="position: fixed;bottom: 40rpx;left: 0;margin-left: 5%;width: 90%;height: 88rpx;border-radius: 44rpx;background-color: #1c1c1e;"
			color="#fff" text="发 布" @click="handleSubmit"></u-button>
	</view>
</template>

<script>
	import {
		commitDynamic,
		getDynamicsTagList
	} from '../../config/api.js';
	import {
		to,
		uploadAfter,
		getSystemInfo,
		pxToRpx
	} from '../../config/utils.js';

	export default {
		data() {
			return {
				fileList: [],
				content: '',
				tagParamList: [],
				imageWidth: 212,
				sending: false,
				num: 0,
				checkboxList: [{
						name: 'tag1',
						value: 'Tag 1',
						label: '标签1'
					},
					{
						name: 'tag2',
						value: 'Tag 2',
						label: '标签2'
					},
					{
						name: 'tag3',
						value: 'Tag 3',
						label: '标签3'
					},
					{
						name: 'tag4',
						value: 'Tag 4',
						label: '标签4'
					},
				],
				checkedValues: [] // 用于存储选中的值
			}
		},
		onReady() {
			this.fetchDynamicsTagList();
			let system = getSystemInfo();
			if (system) {
				let rpx = pxToRpx(8);
				let screenWidth = pxToRpx(system.screenWidth || 320);
				this.imageWidth = Math.floor((screenWidth - 80 - (rpx * 3)) / 3);
			}
		},
		methods: {
			selectList(e) {
				if(this.checkedValues.indexOf(e) == -1) {
					this.checkedValues.push(e); // 选中添加到数组里(下标)
					this.num++;
					if(this.num > 3) {
						uni.showToast({
							title: '最多只能选择三个标签',
						});
						this.checkedValues.splice(this.checkedValues.indexOf(e), 1); 
					}
				} else {
					this.checkedValues.splice(this.checkedValues.indexOf(e), 1); // 取消
					this.num--;
				}
			},
			handleContentInput(e) {
				this.content = e.detail.value;
			},
			handleTagClick(tagId) {
				let _tagParamList = this.tagParamList;
				_tagParamList.forEach(item => {
					if (item.tagId === tagId) {
						item.selected = !item.selected;
					}
				})
			},
			async handleUpload(file) {
				const fileData = await uploadAfter(file.file);

				let fileList = fileData?.filter(item => item.url);
				this.fileList = this.fileList.concat(fileList);
			},
			handleHeaderDel(e) {
				const {
					index
				} = e;
				let fileList = [...this.fileList];
				fileList.splice(index, 1);

				this.fileList = fileList;
			},
			async fetchDynamicsTagList() {
				const [err, data] = await to(getDynamicsTagList());
				if (err) {
					return uni.showToast({
						title: err?.msg || '获取标签失败',
						icon: 'none'
					})
				}
				this.tagParamList = data?.data || [];
			},
			async handleSubmit() {
				if (this.sending) {
					return
				}
				let params = {
					content: this.content,
					picList: this.fileList.map(item => item.url).join(','),
					tagParamList: this.tagParamList.filter(item => item.selected)
				};
				if (!this.content) {
					return uni.showToast({
						title: '请输入动态内容',
						icon: 'none',
					})
				}
				this.sending = true;
				const [err, data] = await to(commitDynamic(params));
				if (err) {
					return uni.showToast({
						title: err?.msg || '发布动态失败',
						icon: 'none'
					})
				}
				if (data.success) {
					uni.showToast({
						title: '发布动态成功'
					})
					setTimeout(() => {
						uni.setStorageSync('__commit_success', '1');
						uni.navigateBack();
					}, 500);
				} else {
					this.sending = false;
				}
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #fff;
	}

	.title {
		height: 42rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
		border-top: 1rpx solid #eee;
		padding: 32rpx 0;
		margin-top: 40rpx;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}

	.tag-item {
		height: 48rpx;
		background: #F7F7F7;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding: 0 16rpx;
	}

	.active {
		/* 激活状态下的样式 */
		background-color: #FFB803;
		color: #fff;
	}

	.tag-item.active {
		background-color: #FFB803;
		color: #fff;
	}
</style>